<template>
    <div class="topbar">
        <!-- 版心 -->
        <div class="wrap topar-in">
            <!-- 左边标题 -->
            <div class="left">
                欢迎来到叩丁狼积分商城
            </div>
            <!-- 右边导航 -->
            <ul class="right">
                <li>
                    <img :src="userInfo.headImg" width="26px" alt="">
                    用户名：{{ userInfo.nickName }}
                </li>
                <li>我的积分：{{ userInfo.coin }}</li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li class="login-btn " v-if="isLogined">
                    <img src="../assets/img/cart.png" alt="" />
                    <span>购物车</span>
                    <b>{{ cartTotal }}</b>
                </li>
                <li class="login-btn" v-else @click="changeIsShowLoginModel(true)">登录</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex';
import { WechatUsersAPT } from "@/request/api"
export default {
    computed: {
        ...mapState({
            isLogined: state => state.isLogined.isLogined,
            // 用户信息
            cartTotal: state => state.userInfo.cartTotal,
            userInfo: state => state.userInfo.userInfo
        })
    },
    methods: {
        ...mapMutations({
            // 方法名:模块名/方法名
            // 模态框方法
            changeIsShowLoginModel: "showModal/changeIsShowLoginModel",
            //购物车方法
            changeIsisLogined: "isLogined/changeIsisLogined",
            // 初始化用户信息
            initUserInfo: "userInfo/initUserInfo"
        }),
        ...mapActions({
            asynChangeIsShowToast: "isShowToast/asynChangeIsShowToast",
            // 用户信息
            asyncChangeUserInfo: "userInfo/asyncChangeUserInfo"
        })

    },
    // 两种场景会执行当前created()
    // 1:项目打开, 页面刷新
    // 2:微信扫码后,页面自动刷新,同时地址中携带一个code参数
    created() {
        //先加载路由
        this.$router.onReady(async () => {
            // 获取code值(当微信用户点击允许后,页面会重新刷新,也就会重新执行topbar中create钩子函数)
            let code = this.$route.query.code
            // console.log(code);
            // 先判断是否有code的 有就发送请求
            if (code) {
                let res = await WechatUsersAPT({
                    code
                })
                console.log("微信登录后res", res);

                /* 
                    效果重现
                    重现407  微信和手机号没有关联的时候"(去备份解绑) 扫码登录
                        --- Login.vue 去输入手机号登录 进行关联 
                    重现400 地址栏中有code 并且 code无效就可以了
                    重现0 微信和手机号关联成功后,重新扫码登录
                */

                // 发送请求返回有3个结果  code==0 code==400 code==407
                if (res.data.code == 0) {
                    // alert("登录成功")
                    this.asynChangeIsShowToast({
                        inshow: true,
                        msg: "发送成功",
                        type: "success"
                    })
                    // 购物车显示
                    this.changeIsisLogined(true)
                    // 存储token
                    localStorage.setItem("x-auth-token", res.data["x-auth-token"])
                    // 清除地址栏的code
                    this.$route.query.code && this.$router.push(this.$route.path)

                    // 微信扫码-调用用户信息方法
                    this.asyncChangeUserInfo()
                } else if (res.data.code == 400) {
                    // 提示刷新二维码
                    // alert("请刷新二维码")
                    this.asynChangeIsShowToast({
                        inshow: true,
                        msg: "请刷新二维码",
                        type: "danger"
                    })
                    // 弹出登录框
                    this.changeIsShowLoginModel(true)
                } else if (res.data.code == 407) {
                    // 提示重新登录手机
                    // alert("请使用手机号重新登录")
                    this.asynChangeIsShowToast({
                        inshow: true,
                        msg: "请使用手机号重新登录",
                        type: "danger"
                    })
                    // 弹出登录框
                    this.changeIsShowLoginModel(true)
                    // 存储uuid (一会登录要用)
                    localStorage.setItem("uuid", res.data.uuid)
                }

            } else {
                let token = localStorage.getItem("x-auth-token")
                this.changeIsisLogined(Boolean(token))
                // 刷新的时候,判断是否有token,有就继续发送请求,否则初始化
                if (token) {
                    this.asyncChangeUserInfo()
                } else {
                    this.initUserInfo()
                }
            }

        })
    },
    // watch: {
    //     // 方法一 也可以用重载组件来解决
    //     // 解决: 登录成功后,手动删除token,切换导航时 购物车没变. 方式一
    //     // 监听路由的地址的变化,如果有token购物车就显示,没有就隐藏
    //     "$route.path": {
    //         handler(newVal, oldVal) {
    //             // console.log(newVal, oldVal);
    //             if (newVal != oldVal) {
    //                 let token = localStorage.getItem("x-auth-token")
    //                 this.changeIsisLogined(Boolean(token))
    //             }
    //         }

    //     }
    // }
};
</script>

<style lang="less" scoped>
.topbar {
    height: 40px;
    line-height: 40px;
    background: #242B39;
    font-size: 14px;
    font-family: SourceHanSansSC;
    color: #FFFEFE;

    .topar-in {
        display: flex;
        justify-content: space-between;
        text-align: center;
    }

    .right {
        display: flex;
        // color: #fff;

        li {
            margin-left: 20px;
            cursor: pointer;
            color: #fff;

            img {
                vertical-align: middle;
                border-radius: 50%;
            }
        }

        .login-btn {
            height: 40px;
            width: 124px;
            background: #0A328E;

            span {
                margin: 0 10px;
            }

            b {
                display: inline-block;
                width: 25px;
                height: 25px;
                line-height: 25px;
                color: #FFFEFE;
                border-radius: 50%;
                background-color: red;
            }
        }

    }
}
</style>